<template>
  <a-layout>
    <a-layout-header>
      <a-form
        :model="formState"
        name="horizontal_login"
        layout="vertical"
        autocomplete="off"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
      >
        <a-form-item
          label="Username"
          name="username"
          :rules="[{ required: true, message: 'Please input your username!' }]"
        >
          <a-input v-model:value="formState.username">
            <template #prefix>
              <UserOutlined class="site-form-item-icon" />
            </template>
          </a-input>
        </a-form-item>

        <a-form-item
          label="Password"
          name="password"
          :rules="[{ required: true, message: 'Please input your password!' }]"
        >
          <a-input-password v-model:value="formState.password">
            <template #prefix>
              <LockOutlined class="site-form-item-icon" />
            </template>
          </a-input-password>
        </a-form-item>

        <a-form-item>
          <a-button :disabled="disabled" type="primary" html-type="submit">Log in</a-button>
        </a-form-item>
      </a-form>
    </a-layout-header>
    <a-layout-content>
      <a-table :dataSource="dataSource" :columns="columns" />
    </a-layout-content>
  </a-layout>
</template>
<script lang="ts">
  import { defineComponent, reactive, ref, computed } from 'vue';
  import { Form, Row } from 'ant-design-vue';
  import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';

  interface FormState {
    username: string;
    password: string;
  }

  export default defineComponent({
    name: 'UserIndexAntd',
    components: {
      Form,
      Row,
      UserOutlined,
      LockOutlined,
    },
    setup() {
      const formState = reactive<FormState>({
        username: '',
        password: '',
      });
      const onFinish = (values: any) => {
        console.log('Success:', values);
      };

      const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
      };
      const disabled = computed(() => {
        return !(formState.username && formState.password);
      });

      return {
        formState,
        onFinish,
        onFinishFailed,
        disabled,
        dataSource: [
          {
            key: '1',
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
          },
          {
            key: '2',
            name: '胡彦祖',
            age: 42,
            address: '西湖区湖底公园1号',
          },
        ],

        columns: [
          {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
          },
          {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
          },
          {
            title: '住址',
            dataIndex: 'address',
            key: 'address',
          },
        ],
      };
    },
  });
</script>
